import Base from '@/components/Base';
import { Button, Card, Slider, Row, Col, Typography, Divider } from 'antd';
import { KayButton } from '@/components/KayUI';
import webGlControl from './control';
import styles from './index.less';

const { Title, Paragraph, Text } = Typography;

interface State {}

export default class Index extends Base<any, State> {
  public state: State = {};

  public async didShow() {}

  public async didMount() {
    // console.log('history', this.navigator.history)
    webGlControl.init();
  }

  public willUnmount() {
    webGlControl.destroy();
  }

  public render() {
    const {} = this.state;
    return (
      <Card title="">
        <Divider />

        <Typography className={styles.contentBox}>
          <Title level={3}>WebGL</Title>
          <Paragraph>
            <p>
              WebGl教程：
              <a
                href="http://www.yanhuangxueyuan.com/WebGL_course.html"
                target="_blank"
              >
                http://www.yanhuangxueyuan.com/WebGL_course.html
              </a>
            </p>
            <p>
              openGl、GLSL教程：
              <a href="https://learnopengl-cn.github.io/" target="_blank">
                https://learnopengl-cn.github.io/
              </a>
              、
              <a href="https://www.wenjiangs.com/doc/wbqk4zdi" target="_blank">
                https://www.wenjiangs.com/doc/wbqk4zdi
              </a>
            </p>

            <p>
              图解WebGL&Three.js工作原理：
              <a
                href="https://www.cnblogs.com/wanbo/p/6754066.html"
                target="_blank"
              >
                https://www.cnblogs.com/wanbo/p/6754066.html
              </a>
            </p>
            <p>
              GLSL着色器代码文档
              <a href="https://docs.gl/sl4/all" target="_blank">
                https://docs.gl/sl4/all
              </a>
              、
            </p>
            <p>
              HLSL着色器代码文档
              <a
                href="https://learn.microsoft.com/zh-cn/windows/win32/direct3dhlsl/dx-graphics-hlsl"
                target="_blank"
              >
                https://learn.microsoft.com/zh-cn/windows/win32/direct3dhlsl/dx-graphics-hlsl
              </a>
              、
              <a
                href="https://docs.unity3d.com/cn/2018.4/Manual/SL-VertexFragmentShaderExamples.html"
                target="_blank"
              >
                https://docs.unity3d.com/cn/2018.4/Manual/SL-VertexFragmentShaderExamples.html
              </a>
            </p>

            <Title level={4}>drawArrays</Title>
            <Text code>void gl.drawArrays(mode, first, count);</Text>
            <p>
              draw
              arrays的方法，传入的是一堆顶点信息，然后根据绘制方式，组织成三角面。缺点是会带来大量的顶点信息冗余。这个方法调用次数越少越好，最好可以一次尽可能多的把点绘制完。
            </p>
            <Title level={5}>参数：</Title>
            <p>GLenum 类型，指定绘制图元的方式，可能值如下</p>
            <p>
              <Text code>gl.POINTS</Text>: 绘制一系列点。
            </p>
            <p>
              <Text code>gl.LINE_STRIP</Text>:
              绘制一个线条。即，绘制一系列线段，上一点连接下一点。
            </p>
            <p>
              <Text code>gl.LINE_LOOP</Text>:
              绘制一个线圈。即，绘制一系列线段，上一点连接下一点，并且最后一点与第一个点相连。
            </p>
            <p>
              <Text code>gl.LINES</Text>:
              绘制一系列单独线段。每两个点作为端点，线段之间不连接。
            </p>
            <p>
              <Text code>gl.TRIANGLE_STRIP</Text>: 绘制一个三角带
            </p>
            <p>
              <Text code>gl.TRIANGLE_FAN</Text>: 绘制一个三角扇
            </p>
            <p>
              <Text code>gl.TRIANGLES</Text>:
              绘制一系列三角形。每三个点作为顶点。
            </p>
          </Paragraph>
          <Paragraph></Paragraph>
        </Typography>

        <canvas
          id="WebGL-test"
          style={{ width: '600px', height: '600px', background: '#f8f5f1' }}
        />
      </Card>
    );
  }
}
